@extends('home.base.index')

@section('content')
    <div id="kefu" style="background:#ddd;display:none;overflow:hidden;width: 230px;height:300px;position: fixed;bottom: 20px;right: 25px;font-size: 13px;line-height: 0;z-index: 100;border:1px solid red;">
        <div style="width:230px;height:10px;">
            <div style="float:right;height:23px;line-height:20px;"><button type="button" onclick="yc()">X</button></div>
        </div>
        <div style="width:230px;height:200px;" id="aaa">
            
        </div>
        <form action="">
            <textarea cols="230" rows="2" id="texta"></textarea>
            <button type="button" id="send">发送</button>
        </form>
    </div>
    <!--内容开始-->
    <div class="details w1200">
    	<div class="deta-info1">
            <!-- <form action="/home/ajax/{{ $list->id }}" method="get" name="proform"> -->
            <!-- <input type="hidden" name='_token' value='{{ csrf_token() }}'> -->
        	<div class="dt-if1-l f-l">
            	<div class="dt-if1-datu">
                <img src="{{ asset('images').'/'.$list->big_picture }}" width="359px" alt="" id="mid">
                <!-- did原图  did:mid 1:5-->
                <div id="did"><img src="{{ asset('images').'/'.$list->big_picture }}" width="1500px" alt=""></div>
                <!-- 放大镜效果 -->
                <script type="text/javascript">
                    //1 节点
                    var mid = document.getElementById("mid");
                    var did = document.getElementById("did");
                    //2 事件
                    mid.onmouseover = function(){
                        //事件处理
                        // alert("流鼻血");
                        did.style.display = "block";

                        //盒子的宽 
                        var width = mid.offsetWidth;


                        //给出did盒子的位置 x y 水平和垂直
                        var x = width+mid.offsetLeft+50+"px";
                        var y = mid.offsetTop+"px";

                        did.style.left = x;
                        did.style.top = y;

                    }

                    mid.onmouseout = function(){
                        //事件处理
                        // alert("止不住");
                        did.style.display = "none";
                    }
                    //鼠标移动事件
                    mid.onmousemove = function(ent){
                        //获得鼠标移动事件对象 
                        var ent  = ent||window.event;

                        //鼠标在mid盒子上的位置
                        var x = ent.clientX-mid.offsetLeft;
                        var y = ent.clientY-mid.offsetTop;
                        // alert(x+":"+y);

                        //鼠标移动的时候did的盒子要跟着动 
                        //为什么要减200 因为要放在did盒子中间 
                        did.scrollTop = y*5-200;
                        did.scrollLeft = x*5-200;
                    }
                </script>
                </div>
                
                <div class="dt-if1-qietu">
                	<a class="dt-qie-left f-l" href="JavaScript:;"><img src="{{ asset('dangdang/images/dt-if1-qietu-left.gif') }}" /></a>
                    <div class="dt-qie-con f-l">
                        <div id="tid">
                            <ul>
                                <li><img src="{{ asset('images').'/'.$list->picture }}" alt=""></li>
                                <li><img src="{{ asset('images/1erweima_home.png') }}" /></a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 切换图片 -->
                    <script type="text/javascript">
                        $(function (){
                            $("#tid img").click(function (){
                                $("#mid").attr("src",$(this).attr("src"));
                                $("#did img").attr("src",$(this).attr("src"));
                            });
                        });
                    </script>
                	<a class="dt-qie-right f-r" href="JavaScript:;"><img src="{{ asset('dangdang/images/dt-if1-qietu-right.gif') }}" /></a>
                </div>
                <div class="dt-if1-fx">
                	<span>商品编码:{{ $list->isbn }}</span>
                    <p>分享到：<a href="#"><img src="{{ asset('dangdang/images/dt-xl.gif') }}" /></a><a href="#"><img src="{{ asset('dangdang/images/dt-kj.gif') }}" /></a><a href="#"><img src="{{ asset('dangdang/images/dt-wx.gif') }}" /></a></p>
                </div>
            </div>
            
        	<div class="dt-if1-m f-l">
            	<div class="dt-ifm-hd">
                	<h3><a href="#">{{ $list->name }}</a></h3>
                	<p>{{ $list->keywords }}</p>
                    <p>作者：<span style="color:blue">{{ $list->author }}</span> 著 &nbsp;
                       出版社：<span style="color:blue">{{ $list->publishing }}</span> &nbsp;
                       出版时间：<span>{{ $list->publish_time }}</span>
                    </p>
                </div>
                <div class="dt-ifm-gojia">
                	<dl>
                    	<dt>当当价</dt>
                        <dd>
                        	<p class="p1">
                               <span class="sp1">¥{{ $list->lower_price }}</span><span class="sp2">{{ $list->fixed_price }}</span>
                            </p>
                            <p class="p2">
                            	<span class="sp1"><img src="{{ asset('dangdang/images/dt-ifm-sp1-img.gif') }}" />5分</span><span class="sp2">共有 {{ $eval }} 条评价</span>
                            </p>
                        </dd>
                        <div style="clear:both;"></div>
                    </dl>
                </div>
                <dl class="dt-ifm-spot">
                	<dt>活动</dt>
                    <dd>
                    	<P><span>包邮</span>本店满50.00元免运费</P>
                    	<P><span>满赠</span>本店满500.00元赠300.00元礼品（随机赠送）</P>
                    </dd>
                    <div style="clear:both;"></div>
                </dl>
                <dl class="dt-ifm-box3">
                	<dt>数量</dt>
                    <dd>
                    	<a class="box3-left" id="minus" href="JavaScript:;">-</a>
                        <input id="num" type="text" value="1">
                    	<a class="box3-right" id="add" href="JavaScript:;">+</a>
                    </dd>
                    <div style="clear:both;"></div>
                </dl>
                <div class="dt-ifm-box4">
                	<button class="btn1" type="button" id="buy">立即购买</button>
                	<button class="btn2" id="shopping">加入购物车</button>
                	<!-- <button class="btn3" id="collect">收藏</button> -->
                </div>
            </div>
            <!-- </form> -->
        	<div class="dt-if1-r f-r">
            	<div class="dt-ifr-hd">
                	<div class="dt-ifr-tit">
                    	<h3 style="color:red">当当自营</h3>
                    </div>
                    <ul class="dt-ifr-ul1">
                    	<li class="zpbz">
                            <a href="http://help.dangdang.com/details/page13" target="_blank">正品保障</a>
                        </li>
                        <li class="hdfk" id="huodaofukuan">
                            <a href="http://help.dangdang.com/details/page21" target="_blank">货到付款</a>
                        </li>
                        <li class="fwzc">
                            <a href="http://help.dangdang.com/details/page13" target="_blank">服务支持</a>
                        </li>
                        <li class="cjfh">
                            <a href="http://help.dangdang.com/details/page203" target="_blank">差价返还</a>
                        </li>
                        <li class="hh">
                            <a href="http://help.dangdang.com/details/page28" target="_blank">15天换货</a>
                        </li>
                        <li class="zclpk other J-lpk">
                            <a href="http://help.dangdang.com/details/page24" target="_blank">支持礼品卡</a>
                        </li>
                        <li class="zcth other">
                            <a href="http://help.dangdang.com/details/page28" target="_blank">支持7天无理由退货</a>
                        </li>
            			<div style="clear:both;"></div>
                    </ul><br>
                    <div class="dt-ifr-tel">
                    </div>
                    <button class="dt-r-btn2" type="button" onclick="chat()" style="margin-left:85px;margin-top:40px">联系客服</button>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
        
        <div class="deta-info2">
        	<div class="dt-if2-l f-l">
            	<div class="if2-l-box1">
                	<div class="if2-tit">
                    	<h3>浏览记录</h3>
                    </div>
                    <ul>
                    @foreach ($browse as $k)
                    	<li>
                        	<a href="{{ url('home/index').'/'.$k->product_id }}"><img src="{{ asset('images').'/'.$k->pic }}" width="100px"/></a>
                            <a class="if2-li-tit" href="#">{{ $k->product_name }}</a>
                            <p>¥{{ $k->product_price }}</p>
                        </li>
                    @endforeach
                    </ul>
                </div>
                <div class="if2-l-box1" style="margin-top:18px;">
                	<div class="if2-tit">
                    	<h3>推荐商品</h3>
                    </div>
                    <ul>
                    @foreach ($rec as $m)
                    	<li>
                        	<a href="{{ url('home/index').'/'.$m->product_id }}"><img src="{{ asset('images').'/'.$m->picture }}" /></a>
                            <a class="if2-li-tit" href="#">{{ $m->name }}</a>
                            <p>¥{{ $m->lower_price }}</p>
                        </li>
                    @endforeach
                    </ul>
                </div>
            </div>
            <div class="dt-if2-r f-r">
                <ul class="if2-tit2">
                    <li class="current" com-det="dt1"><a href="JavaScript:;">产品信息</a></li>
                    <li com-det="dt2"><a href="JavaScript:;">商品评论</a></li>
                    <!-- <li com-det="dt3"><a href="JavaScript:;">商家信息</a></li> -->
                    <div style="clear:both;"></div>
                </ul>
                <div style="border:1px solid #DBDBDB;" com-det-show="dt1">
                    <div class="t_box_left" id="detail_all" name="Detail_pub" dd_name="商品详情">
                        <div class="pro_content" id="detail_describe">
                            <ul class="key clearfix"><br>
                                <table style="font-size:15px; ">
                                    <tr>
                                        <td width=30%>版 次：{{ $list->which_edtion }}</td>
                                        <td width=40% align="center"> 页 数：{{ $list->total_page }}</td>
                                        <td width=30% align="left">字 数：110000</td>
                                    </tr>
                                    <tr>
                                        <td width=30%>印刷时间：{{ $list->print_time }}</td>
                                        <td width=40% align="center">开 本：{{ $list->book_size }}</td>
                                        <td width=30% align="left">纸 张：{{ $list->paper_type }}</td>
                                    </tr>
                                    <tr>
                                        <td width=30%>印 次：{{ $list->print_frequency }}</td>
                                        <td width=40% align="center">包 装：{{ $list->bind_layout }}</td>
                                        <td width=30% align="left">作者：{{ $list->author }}</td>
                                    </tr>
                                    <tr>
                                        <td>国际标准书号ISBN：{{ $list->isbn }}</td>
                                    </tr>
                                </table>           
                            </ul>
                            <br>
                            <hr style="color:#ddd" />
                            <br>
                            <dl style="font-size:15px">编辑推荐</dl>
                            <br>
                            <dt style="font-size:14px;color:#656565">&nbsp;&nbsp;&nbsp;&nbsp;{{ $list->editor_description }}</dt>
                            
                            <br>
                            <hr style="color:#ddd" />
                            <br>
                            <dl style="font-size:15px">内容简介</dl>
                            <br>
                            <dt style="font-size:14px;color:#656565">&nbsp;&nbsp;&nbsp;&nbsp;{{ $list->book_summary }}</dt>

                            <br>
                            <hr style="color:#ddd" />
                            <br>
                            <dl style="font-size:15px">作者简介</dl>
                            <br>
                            <dt style="font-size:14px;color:#656565">&nbsp;&nbsp;&nbsp;&nbsp;{{ $list->author_summary }}</dt>

                            <br>
                            <hr style="color:#ddd" />
                            <br>
                            <dl style="font-size:15px">部分章节</dl>
                            <br>
                            <dt style="font-size:14px;color:#656565">&nbsp;&nbsp;&nbsp;&nbsp;{{ $list->catalog }}</dt>

                            <br>
                            <hr style="color:#ddd" />
                            <br>
                            <span style="font-size:15px">书籍插画</span>
                            <br><br>
                            <img src="{{ asset('images').'/'.$list->big_picture }}" style="width:900px" />  
                        </div>
                        <!-- 快速直达 begin -->
                        <!-- <div class="if2-tu1">
                            <br>
                            <span>书籍插画</span>
                            <img src="{{ asset('dangdang/Picture').'/'.$list->picture }}" style="width:935px" />
                        </div> -->
                        <!-- detail 说明end -->
                    </div>
                </div>
                <div style="display:none;" com-det-show="dt2" id="pj">
                <div class="if2-r-box3" >
                	<ul id="sss">
                    	<li class="current-li"><a href="javascript:void(0)" id="qp">全部（{{ $eval }}）</a></li>
                    	<li><a href="javascript:void(0)" id="hp">好评（{{ $a }}）</a></li>
                    	<li><a href="javascript:void(0)" id="zp">中评（{{ $b }}）</a></li>
                    	<li><a href="javascript:void(0)" id="cp">差评（{{ $c }}）</a></li>
                        <div style="clear:both;"></div>
                    </ul>
                    @foreach ($user as $v)
                   <!--  <dl>
                       <dt>
                           <a href="#"><img src="{{ asset('dangdang/images/box3-dt-tu.gif') }}" /></a>
                       </dt>
                       <dd>
                           <a href="#">{{ $v->nick_name }}</a>
                           <p class="b3-p1">{{ $v->content }}</p>
                           <p class="b3-p2">{{ $v->evaluation_time }}</p>
                           <div style="clear:both;"></div>
                           <div class="b3-zuijia">
                               <p class="zj-p1">商家回复：</p>
                               <p class="zj-p2">{{ $v->reply_content }}</p>
                               <p class="zj-p3">{{ $v->reply_time }}</p>
                           </div>
                       </dd>
                                           <div style="clear:both;"></div>
                   </dl> -->
                    @endforeach
                    <!--分页-->
                   	<div class="paging">
                    	<div class="pag-left f-l">
                        	
                            <!-- {{ $user->links() }} -->
                            
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>
            </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
<script type="text/javascript">
    $(function (){
        var id = {{ $list->id }};
        $.ajax({
            url:'/home/quanping',
            async:false,                //是否异步
            type:'get',                //请求方式
            data:{id:id},               //发送的数据
            dataType:'json',            //响应的数据类型
            error:function()            //失败时回调函数
            {
                alert('ajax请求失败');
            },
            success:function(data)      //成功时回调函数
            {
                var nick_name = '';
                for(var i=0;i<data['data'].length;i++){
                    nick_name = data['data'][i].nick_name;
                    $('#sss').append('<dl><dt><a href="#"><img src="/dangdang/images/box3-dt-tu.gif" /></a></dt><dd><a href="#">'+nick_name+'</a><p class="b3-p1">'+data['data'][i].content+'</p><p class="b3-p2">'+data['data'][i].evaluation_time+'</p><div style="clear:both;"></div><div class="b3-zuijia"><p class="zj-p1">商家回复：</p><p class="zj-p2">'+data['data'][i].reply_content+'</p><p class="zj-p3">'+data['data'][i].reply_time+'</p></div></dd><div style="clear:both;"></div></dl>');
                //判断是否还有数据返回
                // console.log(nick_name);
                }         
            }
        });
    });

    $("#qp").click(function (){
            var id = {{ $list->id }};
            $('#sss').children('dl').remove();
            // console.log($('#sss').children('dl'));
            $.ajax({
                url:'/home/quanping',
                async:false,                //是否异步
                type:'get',                //请求方式
                data:{id:id},               //发送的数据
                dataType:'json',            //响应的数据类型
                error:function()            //失败时回调函数
                {
                    alert('ajax请求失败');
                },
                success:function(data)      //成功时回调函数
                {
                    var nick_name = '';
                    for(var i=0;i<data['data'].length;i++){
                        nick_name = data['data'][i].nick_name;
                        $('#sss').append('<dl><dt><a href="#"><img src="/dangdang/images/box3-dt-tu.gif" /></a></dt><dd><a href="#">'+nick_name+'</a><p class="b3-p1">'+data['data'][i].content+'</p><p class="b3-p2">'+data['data'][i].evaluation_time+'</p><div style="clear:both;"></div><div class="b3-zuijia"><p class="zj-p1">商家回复：</p><p class="zj-p2">'+data['data'][i].reply_content+'</p><p class="zj-p3">'+data['data'][i].reply_time+'</p></div></dd><div style="clear:both;"></div></dl>');
                    //判断是否还有数据返回
                    // console.log(nick_name);
                    }         
                }
            });
        });

    $(function (){
        $("#hp").click(function (){
            var id = {{ $list->id }};
            $('#sss').children('dl').remove();
            // console.log($('#sss').children('dl'));
            $.ajax({
                url:'/home/haoping',
                async:false,                //是否异步
                type:'get',                //请求方式
                data:{id:id},               //发送的数据
                dataType:'json',            //响应的数据类型
                error:function()            //失败时回调函数
                {
                    alert('ajax请求失败');
                },
                success:function(data)      //成功时回调函数
                {
                    var nick_name = '';
                    for(var i=0;i<data['data'].length;i++){
                        nick_name = data['data'][i].nick_name;
                        $('#sss').append('<dl><dt><a href="#"><img src="/dangdang/images/box3-dt-tu.gif" /></a></dt><dd><a href="#">'+nick_name+'</a><p class="b3-p1">'+data['data'][i].content+'</p><p class="b3-p2">'+data['data'][i].evaluation_time+'</p><div style="clear:both;"></div><div class="b3-zuijia"><p class="zj-p1">商家回复：</p><p class="zj-p2">'+data['data'][i].reply_content+'</p><p class="zj-p3">'+data['data'][i].reply_time+'</p></div></dd><div style="clear:both;"></div></dl>');
                    //判断是否还有数据返回
                    // console.log(nick_name);
                    }        
                }
            });
        });
    });

    $(function (){
        $("#zp").click(function (){
            var id = {{ $list->id }};
            $('#sss').children('dl').remove();
            $.ajax({
                url:'/home/zhongping',
                async:false,                //是否异步
                type:'get',                //请求方式
                data:{id:id},               //发送的数据
                dataType:'json',            //响应的数据类型
                error:function()            //失败时回调函数
                {
                    alert('ajax请求失败');
                },
                success:function(data)      //成功时回调函数
                {
                    var nick_name = '';
                    for(var i=0;i<data['data'].length;i++){
                        nick_name = data['data'][i].nick_name;
                        $('#sss').append('<dl><dt><a href="#"><img src="/dangdang/images/box3-dt-tu.gif" /></a></dt><dd><a href="#">'+nick_name+'</a><p class="b3-p1">'+data['data'][i].content+'</p><p class="b3-p2">'+data['data'][i].evaluation_time+'</p><div style="clear:both;"></div><div class="b3-zuijia"><p class="zj-p1">商家回复：</p><p class="zj-p2">'+data['data'][i].reply_content+'</p><p class="zj-p3">'+data['data'][i].reply_time+'</p></div></dd><div style="clear:both;"></div></dl>');
                    //判断是否还有数据返回
                    // console.log(nick_name);
                    }         
                }
            });
        });
    });

    $(function (){
        $("#cp").click(function (){
            var id = {{ $list->id }};
            $('#sss').children('dl').remove();
            $.ajax({
                url:'/home/chaping',
                async:false,                //是否异步
                type:'get',                //请求方式
                data:{id:id},               //发送的数据
                dataType:'json',            //响应的数据类型
                error:function()            //失败时回调函数
                {
                    alert('ajax请求失败');
                },
                success:function(data)      //成功时回调函数
                {
                    var nick_name = '';
                    for(var i=0;i<data['data'].length;i++){
                        nick_name = data['data'][i].nick_name;
                        $('#sss').append('<dl><dt><a href="#"><img src="/dangdang/images/box3-dt-tu.gif" /></a></dt><dd><a href="#">'+nick_name+'</a><p class="b3-p1">'+data['data'][i].content+'</p><p class="b3-p2">'+data['data'][i].evaluation_time+'</p><div style="clear:both;"></div><div class="b3-zuijia"><p class="zj-p1">商家回复：</p><p class="zj-p2">'+data['data'][i].reply_content+'</p><p class="zj-p3">'+data['data'][i].reply_time+'</p></div></dd><div style="clear:both;"></div></dl>');
                    //判断是否还有数据返回
                    // console.log(nick_name);
                    }         
                }
            });
        });
    });

    $('#buy, #shopping').click(function(){
        var num = $('#num').val();
        // alert(num);
        var id = {{ $list->id }};
        $.ajax({
            url:'/home/proajax',
            async:false,                //是否异步
            type:'get',                //请求方式
            data:{id:id, num:num},               //发送的数据
            dataType:'json',            //响应的数据类型
            error:function()            //失败时回调函数
            {
                alert('该商品已加入购物车');
            },
            success:function(data)      //成功时回调函数
            {
                // console.log(data);
                //判断是否还有数据返回
                if(data == 'no'){
                    window.location.href = '/home/gologin';
                }else{
                    window.location.href = '/home/proajax/'+id;
                }   
            }
        });
    });
    function get_chat(){
        $.ajax({
            url:'/home/get_chat',
            async:false,                //是否异步
            type:'get',                //发送的数据
            dataType:'json',            //响应的数据类型
            error:function()            //失败时回调函数
            {
                alert('ajax请求失败');
            },
            success:function(data)      //成功时回调函数
            {
                //data->user_id;
                var trs = ""; 
                for(var i=0;i<data.length;i++){
                    console.log(data[i].content);
                    if(data[i].user_id || data[i].manager_id){
                    if(data[i].user_id){
                        trs+='<div style="width:230px;height:20px;text-align:left;"><div style="float:left;height:20px;background:red;line-height:20px;"><img src="{{ asset('images/2.jpg') }}" height="20px" style="float:left;">'+data[i].content+'</div></div>';
                    }else{
                        trs+='<div style="width:230px;height:20px;text-align:right;"><div style="float:right;height:20px;background:red;line-height:20px;">'+data[i].content+'<img src="{{ asset('images/3.jpg') }}" height="20px" style="float:right;"></div></div>';
                    }
                }else{
                    trs+='<div style="width:230px;height:20px;text-align:left;"><div style="float:left;height:20px;background:red;line-height:20px;"><img src="{{ asset('images/2.jpg') }}" height="20px" style="float:left;">'+data[i].content+'</div></div>';
                }
            }
                var div = document.getElementById("aaa");
                 while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
                {
                    div.removeChild(div.firstChild);
                }
                $('#aaa').append(trs);
                
                /*var str = '<div style="width:230px;height:20px;text-align:left;"><div style="float:left;height:20px;background:red;line-height:20px;">'+data+'</div></div>';
                $('#aaa').append(str);*/
            }
        });
    }
    
    function chat(){
        document.getElementById("kefu").style.display="block";
        time = setInterval("get_chat()",1000);
    }
    function yc(){
        document.getElementById("kefu").style.display="none";
        clearInterval(time);
    }
    $('#send').click(function(){
       var content = $(this).prev().val();
        $.ajax({
            url:'/home/chat',
            async:false,                //是否异步
            type:'get',                //请求方式
            data:{content:content},               //发送的数据
            dataType:'json',            //响应的数据类型
            error:function()            //失败时回调函数
            {
                alert('ajax请求失败');
            },
            success:function(data)      //成功时回调函数
            {
                console.log(data);
                var str = '<div style="width:230px;height:20px;text-align:left;"><div style="float:left;height:20px;background:red;line-height:20px;"><img src="{{ asset('images/2.jpg') }}" height="20px" style="float:left;">'+data+'</div></div>';
                $('#aaa').append(str);
                var text ='';
                document.getElementById("texta").value = text;
            }
        });
    });
</script>
    
@stop
